<template>
  <div class="treelist">
    <div class="title">{{ titleName }}</div>
    <!-- 树状列表组件 -->
    <div class="treeContent">
      <TreeNode v-show="newList.length" :treeIndex="treeIndex" @setChooseIndex="setChooseIndex" @getTreeNode="getTreeNode"
        v-for="item, index in newList" :key="index" :node="item" :nodeIndex="index + ''"></TreeNode>
        {{ addDataPath }}
        <span class="noData" v-show="!newList.length">暂无数据</span>
    </div>
  </div>
</template>
<script>
import TreeNode from '../TreeNode';
export default {
  components: {
    TreeNode,
  },
  props: {
    titleName: {
      type: String,
      default: () => {
        return '选择'
      }
    },
    addDataPath: {
      type: String,
      default: () => {
        return ''
      }
    },
    treeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    treeProps: {
      type: Object,
      default: () => {
        return {
          label: 'label',
          value: 'value',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      treeIndex: '0',
      list: []
    }
  },
  computed: {
    newList() {
      return this.setTreeList(this.treeList)
    }
  },
  mounted() { },
  methods: {
    setChooseIndex(index) {
      this.treeIndex = index
    },
    getTreeNode(node) {
      this.$emit('getTreeNode', node)
    },
    setTreeList(arr) {
      let list = []
      arr.forEach(e => {
        let { label, value, children } = this.treeProps;
        if (e[children || 'children']) {
          e[children || 'children'] = this.setTreeList(e[children || 'children'])
        }
        list.push(e = {
          label: e[label || 'label'],
          value: e[value || 'value'],
          children: e[children || 'children'],
          ...e
        })

      })
      return list
    },
  }
}
</script>
<style lang="scss" scoped>
.treelist {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;

  .title {
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    font-weight: bold;
    color: #00365D;
  }

  .treeContent {
    width: 100%;
    height: calc(100% - 50px);
    border: 1px solid #B8BCC3;
    background-color: #ffffff;
    overflow: auto;
    position: relative;

    &::-webkit-scrollbar {
      display: none;
    }
  }

}
</style>